<template>
	<view class="container">
		<view class="position-relative">
			<image src="https://img-shop.qmimg.cn/s16/images/2020/01/20/9a82219bedcae5c2.jpeg" class="bg"></image>
			<button type="default" size="mini" class="hym-btn" @tap="memberCode">
				<image src="/static/images/mine/hym.png"></image>
				<text>会员码</text>
			</button>
		</view>
		
		<view class="content">
			<view class="user-info">
				<view class="user-top">
					<view class="avatar">
						<image src='/static/images/mine/default.png'></image>
					</view>
					<view class="user-name">
						<view v-if="isLogin" class="user-name-info" @tap="updateInfo">
							{{userInfo.name}}
						</view>
						<view v-else class="user-name-info" @tap="login">
							请点击授权登录
						</view>
						<view class="growth-value">
							当前成长值0/0
						</view>
						<view class="w-100">
							 <progress percent="0" activeColor="#ADB838" height="8rpx"  border-radius="8rpx"/>
						</view>
					</view>
					<view class="level-benefit">
						<view>会员权益</view>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
				</view>
				<view class="user-bottom">
					<view class="user-grid">
						<text class="icon-text">***</text>
						<text class="grid-text">奈雪券</text>
					</view>
					<view class="user-grid">
						<text class="icon-text">***</text>
						<text class="grid-text">积分商城</text>
					</view>
					<view class="user-grid" @tap="recharge">
						<text v-if="isLogin" class="icon-text">{{userInfo.money}}￥</text>
						<text v-else class="icon-text">***</text>
						<text class="grid-text">余额</text>
					</view>
					<view class="user-grid">
						<text class="icon-text">***</text>
						<text class="grid-text">礼品卡</text>
					</view>
				</view>
			</view>
			<image src="/static/images/mine/banner.png" class="banner" mode="widthFix"></image>
		</view>
		<view class="service">
			<view class="ser-name">
				我的服务
			</view>
			<view class="row">
				<view class="grid" @tap="attendance">
					<view class="image">
						<image src="/static/images/mine/jfqd.png"></image>
					</view>
					<view>积分签到</view>
				</view>
				<view class="grid">
					<view class="image">
						<image src="/static/images/mine/stxy.png"></image>
					</view>
					<view>送她心愿</view>
				</view>
				<view class="grid">
					<view class="image">
						<image src="/static/images/mine/nxsc.png"></image>
					</view>
					<view>奈雪商城</view>
				</view>
				<view class="grid">
					<view class="image">
						<image src="/static/images/mine/lxkf.png"></image>
					</view>
					<view>联系客服</view>
				</view>
				<view class="grid" @tap="orders">
					<view class="image">
						<image src="/static/images/mine/wddd.png"></image>
					</view>
					<view>我的订单</view>
				</view>
				<view class="grid" @tap="userinfo">
					<view class="image">
						<image src="/static/images/mine/wdzl.png"></image>
					</view>
					<view>我的资料</view>
				</view>
				<view class="grid" @tap="addresses">
					<view class="image">
						<image src="/static/images/mine/shdz.png"></image>
					</view>
					<view>收货地址</view>
				</view>
				<view class="grid" @tap="services">
					<view class="image">
						<image src="/static/images/mine/gdfw.png"></image>
					</view>
					<view>更多服务</view>
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<view class="clearBtn">
			<u-button type="warning" class="clebtn" text="退出登录" @tap="clearHandler"></u-button>
		</view>
		<u-popup :show="showMoney" mode="center" :round="10" closeable closeOnClickOverlay @close="showMoney=false">
			<view class="money">
				<text class="text">充值</text>
				<view class="money-text">
					<u-icon name="rmb-circle" size="30"></u-icon>
					  <u--input
						v-model="money"
						type="number"
						placeholder="请输入充值金额"
						border="bottom"
						clearable
					  ></u--input>
				</view>
				<u-button class="money-btn" type="primary" text="确定" @tap="rechargeBtn"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				showMoney:false,
				money:'',
			}
		},
		onLoad() {
			// this.userBalance()
		},
		computed:{
			...mapState('user',['isLogin','userInfo'])
		},
		methods: {
			...mapActions('user',['userRecharge','clearLogin']),
			// 去登录
			login(){
				uni.navigateTo({
					url:'/subpackage/login/login'
				})
			},
			// 修改用户信息
			updateInfo(){
				console.log('修改信息还没做');
			},
			// 充值
			recharge(){
				this.showMoney=true
			},
			// 充值按钮
			rechargeBtn(){
				this.userRecharge({money:Number(this.money)})
				this.showMoney=false
			},
			// 退出登录
			clearHandler(){
				this.clearLogin()
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.position-relative{
		position: relative;
		width: 750rpx;
		height: 516rpx;
		image{
			width: 100%;
			height: 100%;
		}
		.hym-btn{
			position: absolute;
			top: 40rpx;
			right:40rpx;
			width: 180rpx;
			height: 60rpx;
			color: #ADB838;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 60rpx;
			font-size: 12px;
			box-shadow: 0 0 10px rgba(66, 66, 66, 0.1);
			image{
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.content{
		position: relative;
		background-color: #f0f7f9;
		height: 440rpx;
		.user-info{
			position: absolute;
			left: 30rpx;
			top: -100rpx;
			width: 690rpx;
			height: 290rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.user-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				width: 690rpx;
				height: 126rpx;
				.avatar{
					position: absolute;
					bottom: 0;
					margin: 0 34rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.user-name{
					margin-top: 20rpx;
					margin-left: 220rpx;
					width: 270rpx;
					height: 86rpx;
					.user-name-info{
						font-size: 32rpx;
						font-weight: 700;
					}
					.growth-value{
						    color: #919293;
							font-size: 24rpx;
					}
				}
				.level-benefit {
					display: flex;
					width: 160rpx;
					height: 50rpx;
					background-color: orange;
					margin-left: 17px;
					padding: 10rpx 0 10rpx 30rpx;
					border-radius: 50rpx 0 0 50rpx;
					box-sizing: border-box;
					view{
						color: #ffffff;
						font-size: 24rpx;
					}
				}
			}
			.user-bottom{
				display: flex;
				width: 690rpx;
				height: 164rpx;
				.user-grid{
					width: 25%;
					height: 164rpx;
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					.icon-text{
						margin-bottom: 20rpx;
						width: 60rpx;
						height: 52rpx;
						font-size: 40rpx;
						font-weight: 700;
						text-align: center;
					}
					.grid-text{
						color: #919293;
						font-size: 24rpx;
					}
				}
			}
		}
		.banner{
			position: absolute;
			top: 220rpx;
			left: 30rpx;
			width: 690rpx;
			height: 160rpx;
			border-radius: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	.service{
		width: 750rpx;
		padding: 20rpx;
		height: 460rpx;
		box-sizing: border-box;
		.ser-name{
			margin-bottom: 20rpx;
			color: #5A5B5C;
			font-weight: 700;
		}
		.row{
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			width: 690rpx;
			height: 360rpx;
			color: #919293;
			font-size: 24rpx;
			.grid{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.clearBtn{
		margin: 0 auto;
		width: 90%;
	}
	.money{
		padding: 20rpx;
		height: 300rpx;
		width: 600rpx;
		box-sizing: border-box;
		.text{
			margin: 20rpx auto;
			display: block;
			text-align: center;
		}
		.money-text{
			display: flex;
		}
		.money-btn{
			margin-top: 30rpx;
		}
	}
}
</style>
